@charset "utf-8";
//标题的颜色
@titleColor:#444;
//内容的颜色
@contentColor:#666;
//信息的颜色，如浏览量，收藏等
@infoColor: #b9b9b9;
//操作按钮的颜色，最浅色
@handleColor: #ababab;
//网站背景颜色
@bodyColor: #f6f6f6;
//蓝色字体颜色
@font_blue: #5bb4e1;
//a标签颜色
@a_color:#4991b5;
.a_removeStyle(){
  a{
    text-decoration: none;
    color: @titleColor;
  }
}

//使用外边距实现块级元素左右居中
.margin_Auto(){
  margin: 0 auto;
}
//外边距，上下、左右等值,默认无边距
.margin(@tb:0,@lr:0){
  margin: @tb @lr;
}
.margin_left(@left){
  margin-left: @left;
}
.margin_right(@right){
  margin-right: @right;
}
.margin_top(@top){
  margin-top: @top;
}
.margin_bottom(@bottom){
  margin-bottom: @bottom;
}
//外边距，上右下左依次赋值，默认值为0
.margin_All(@t:0px,@r:0px,@b:0px,@l:0px){
  margin: @t @r @b @l;
}
//移除外边距
.margin_Remove(){
  margin: 0;
}


//移除所有内边距
.padding_Remove(){
  padding: 0;
}
//内边距，上下、左右等值,默认无边距
.padding(@tb:0,@lr:0){
  padding: @tb @lr;
}
.padding_left(@left){
  padding-left: @left;
}
.padding_right(@right){
  padding-right: @right;
}
.padding_top(@top){
  padding-top: @top;
}
.padding_bottom(@bottom){
  padding-bottom: @bottom;
}
//内边距，上右下左依次赋值，默认值为0
.padding_All(@t:4px,@r:4px,@b:4px,@l:4px){
  padding: @t @r @b @l;
}
//ul标签默认样式
.ul_BaseStyle(){
  list-style: none;
  .margin();
  .padding();
}
//右下阴影
.shadow(@w:4px,@c:#CADBE9){
  box-shadow:@c @w @w @w*1.5;
}
.shadow_all(@w:4px,@c:#CADBE9){
  box-shadow:@c 0 0 @w*1.5;
}
//阴影，透明度
.shadow_opacity(@w:4px,@c:#CADBE9,@opacity:1){
  opacity: @opacity;
  box-shadow:@c @w @w @w*2;
}
//圆角
.radius(@w:4px){
  border-radius: @w;
}
.radius_all(@lt:4px,@rt:4px,@rb:4px,@lb:4px){
  border-radius: @lt @rt @rb @lb;
}
//边框
.border(@brColor:@handleColor,@brSize:1px){
  border: @brSize  solid @brColor;
}
.border_left(@brColor:@handleColor,@brSize:1px){
  border-left:@brSize @brColor solid;
}
.border_right(@brColor:@handleColor,@brSize:1px){
  border-right:@brSize @brColor solid;
}
.border_bottom(@brColor:@handleColor,@brSize:1px){
  border-bottom:@brSize @brColor solid;
}
.border_top(@brColor:@handleColor,@brSize:1px){
  border-top:@brSize @brColor solid;
}
//设置宽高
.size(@width,@height){
  width: @width;
  height: @height;
}
//悬浮样式，修改背景颜色或字体颜色
.hover_default(@bColor,@fColor){
  &:hover{
    background-color: @bColor;
    color: @fColor;
    cursor: pointer;
  }
}
//悬浮样式，修改背景颜色或字体颜色，透明度
.hover_opacity(@bColor,@fColor,@opacity){
  &:hover{
    background-color: @bColor;
    color: @fColor;
    opacity: @opacity;
    cursor: pointer;
  }
}
//悬浮样式，修改背景颜色以及阴影效果
.hover_shadow(@sWidth:8px,@sColor:#CADBE,@bColor:#f6f6f6){
  &:hover{
    .shadow(@w:@sWidth,@c:@sColor);
    background-color: @bColor;
    cursor: pointer;
  }
}
.action_default(@bColor:@font_blue,@fColor:white){
  background-color: @bColor;
  color: @fColor;
}
.action_border(@brColor:@font_blue,@brSize:1px,@fColor:@font_blue){
  border-bottom: @brSize @brColor solid;
  color: @fColor;
}






//按钮基础样式
.btn_base(@width:10px,@height:20px,@bColor,@fColor,@radius:4px,@hColor){
  background-color: @bColor;
  border-radius: @radius;
  border: 1px @fColor solid;
  width: @width;
  height: @height;
  color: @fColor;
  &:hover{
    background-color:@hColor;
    cursor: pointer;
  }
}
//按钮默认样式——蓝色
.btn_default(fill,@width:10px,@height:20px){
  .btn_base(@width,@height,#66ccff,white,4px,darken(#66ccff,20%));
}
.btn_default(empty,@width:10px,@height:20px){
  .btn_base(@width,@height,white,#66ccff,4px,#f4f5f9);
}
//提交按钮样式-绿色
.btn_submit(fill,@width:10px,@height:20px){
  .btn_base(@width,@height,#67D5B5,white,4px,darken(#67D5B5,10%));
}
.btn_submit(empty,@width:10px,@height:20px){
  .btn_base(@width,@height,white,#67D5B5,4px,#f4f5f9);
}
//禁用按钮样式-灰色
.btn_stop(fill,@width:10px,@height:20px){
  .btn_base(@width,@height, #b7c0c6,white,4px,darken(#b7c0c6,20%));
}
.btn_stop(empty,@width:10px,@height:20px){
  .btn_base(@width,@height,white,#b7c0c6,4px,#f4f5f9);
}
//错误按钮样式-红色
.btn_error(fill,@width:10px,@height:20px){
  .btn_base(@width,@height, #F16B6F,white,4px,darken(#F16B6F,20%));
}
.btn_error(empty,@width:10px,@height:20px){
  .btn_base(@width,@height,white,#F16B6F,4px,#f4f5f9);
}
//紫色按钮
.btn_purple(fill,@width:10px,@height:20px){
  .btn_base(@width,@height, #A593E0,white,4px,darken(#A593E0,10%));
}
.btn_purple(empty,@width:10px,@height:20px){
  .btn_base(@width,@height,white,#A593E0,4px,#f4f5f9);
}


//下拉菜单
.dropDown(@width:160px,@height:40px,@bColor:white,@fColor:@contentColor){
  .ul_BaseStyle;
  float: left;
  background-color: @bColor;
  a{
    display: none;
  }
  li{
    transition:  all 0.4s;
    text-align: center;
    width:@width;
    line-height:@height;
    background-color: @bColor;
    display: none;
    color: @fColor;
    &:hover{
      cursor: pointer;
      background-color: #d5d5d5;
    }
  }
  li:first-child{
    display: block;
  }
  &:hover>a{
    display: block;
  }
  &:hover>li{
    display: block;
  }
}

//小三角
.triangle_base(@w){
  .size(0,0);
  border-width: @w;
}
//箭头向上的三角
.triangle_top(@w:5px,@c:#ccc){
  .triangle_base(@w);
  border-color: transparent transparent @c transparent;
  border-style: dashed dashed solid dashed;
}
//箭头向下的三角
.triangle_bottom(@w:5px,@c:#ccc) {
  .triangle_base(@w);
  border-color: @c transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}
//箭头向下的三角
.triangle_left(@w:5px,@c:#ccc) {
  .triangle_base(@w);
  border-color: transparent @c transparent  transparent;
  border-style: dashed solid dashed  dashed;
}
//箭头向右的三角
.triangle_right(@w:5px,@c:#ccc) {
  .triangle_base(@w);
  border-color: transparent transparent transparent @c;
  border-style: dashed dashed dashed solid;
}

//基于已知高度的父元素来垂直居中,line-height为父元素高度，height为元素自身高度,父容器需要设置为相对定位
.positionCenter(@line-height,@height){
  position: absolute;
  top: @line-height/2-@height/2;
}
//卡片背景
.card(@ptb:5px,@plr:5px,@bColor:white){
  .shadow();
  .radius();
  .padding(@ptb,@plr);
  background-color: @bColor;

}


//分页样式,需要额外为li标签赋内外边距
.page_default(@bColor:white,@fColor:@font_blue,@hBColor:@font_blue,@hFColor:white){
  .ul_BaseStyle;
  li{
    text-align: center;
    float: left;
    color: @fColor;
    min-width: 28px;
    background-color: @bColor;
    .radius();
    .shadow();
    .hover_default(@hBColor,@hFColor);
    &:nth-child(5){
      .hover_default(@bColor,@fColor)
    }
  }
}


//悬浮标签页样式，最外层div设为相对定位，具体实现参照Template
.tab_hoverStyle(@width:500px,@height:500px,@bColor:white){
  background-color:transparent;
  position: absolute;
  div{
    display: none;
    width: @width;
    height: @height;
    background-color: @bColor;
  }
  &:hover div{
    display: block;
  }
}
.tab_head_hoverStyle(@bColor:white,@width:60px,@height:40px,@left:140px,@index:10){
  background-color: @bColor;
  width: @width;
  line-height: @height;
  display: block;
  text-align: center;
  position: relative;
  left: @left;
  z-index: @index;
}
.showScroll(@height:100vh){
  overflow-y: auto;
  height: @height;
}

//文本溢出处理,参数为行数
.text_overflow(@line:1){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:@line;
  overflow: hidden;
}




